<template>
  <a-modal
    title="添加物料"
    :width="760"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template v-if="v.type == 'select'">
                  <a-select
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"
                    @change="v.onChange">
                    <a-select-option
                      :key="sk"
                      v-for="(item,sk) in selectList[v.listName]"
                      :value="v.listValue?item[v.listValue]:item">{{
                        item[v.listLabel]
                      }}
                    </a-select-option>
                  </a-select>
                </template>
                <template v-else-if="v.type == 'textarea'">
                  <a-textarea
                    :auto-size="{ minRows: 5, maxRows: 10 }"
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"/>
                </template>
                <template v-else-if="v.type == 'password'">
                  <a-input-password
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"
                    placeholder="請輸入密碼"/>
                </template>
                <template v-else-if="v.type == 'upload'">
                  <a-upload
                    name="file"
                    :showUploadList="false"
                    :customRequest="upload"
                  >
                    <a-button>
                      <a-icon type="upload"/>
                      Click to Upload
                    </a-button>
                  </a-upload>
                  <span v-if="model!==null">{{ model[v.key] }}</span>
                </template>
                <template v-else-if="v.type == 'date'">
                  <a-date-picker
                    valueFormat="yyyy-MM-DD"
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"/>
                </template>
                <template v-else-if="v.type == 'number'">
                  <a-input
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message, type: 'number',transform(value){return Number(value)}}]}]"/>
                </template>
                <template v-else>
                  <a-input
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message}]}]"/>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { _getAllGoods } from '@/api/goods'
// 表单字段
const fields = [
  {
    key: 'idGoo',
    label: '选择货品',
    required: true,
    message: '',
    type: 'select',
    listName: 'goodsList',
    listValue: 'idGoo',
    listLabel: 'nameHk'
  },
  { key: 'subQuantity', label: '消耗数量', required: true, message: '' }
]
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => null
    },
    idBraSto: {
      type: Number,
      default: 0
    }
  },
  data () {
    this.formLayout = {}
    return {
      form: this.$form.createForm(this),
      fields: fields,
      loading: false,
      selectList: {
        goodsList: []
      }
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted () {
    _getAllGoods().then((ret) => {
      this.selectList.goodsList = ret.data
    })
  },
  methods: {
    // handler
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          for (var i = 0; i < this.selectList.goodsList.length; i++) {
            if (this.selectList.goodsList[i].idGoo === values.idGoo) {
              values['nameHk'] = this.selectList.goodsList[i].nameHk
              values['no'] = this.selectList.goodsList[i].no
              values['category'] = this.selectList.goodsList[i].categoryName
              values['type'] = this.selectList.goodsList[i].type
            }
          }
          this.$emit('ok', values)
        }
      })
    }
  }
}
</script>
